<template>
    <u-popup closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="value" length="auto"
     :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
        <view class="u-calendar">
            <view class="u-calendar__header">
                <view class="u-calendar__header__text" v-if="!$slots['tooltip']">
                    {{toolTip}}
                </view>
                <slot v-else name="tooltip" />
            </view>
            <view class="u-calendar__action u-flex u-row-center">
                <view class="u-calendar__action__icon">
                    <u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
                </view>
                <view class="u-calendar__action__icon">
                    <u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
                </view>
                <view class="u-calendar__action__text">{{ showTitle }}</view>
                <view class="u-calendar__action__icon">
                    <u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
                </view>
                <view class="u-calendar__action__icon">
                    <u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
                </view>
            </view>
            <view class="u-calendar__week-day">
                <view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
            </view>
            <view class="u-calendar__content">
                <!-- 前置空白部分 -->
                <block v-for="(item, index) in weekdayArr" :key="index">
                    <view class="u-calendar__content__item"></view>
                </block>
                <view class="u-calendar__content__item" :class="{
                    'u-hover-class':openDisAbled(year,month,index+1),
                    'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
                    'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
                }" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
                 @tap="dateClick(index)">
                    <view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
                        <view>{{ index + 1 }}</view>
                    </view>
                    <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
                    <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
                </view>
                <view class="u-calendar__content__bg-month">{{month}}</view>
            </view>
            <view class="u-calendar__bottom">
                <view class="u-calendar__bottom__choose">
                    <text>{{mode == 'date' ? activeDate : startDate}}</text>
                    <text v-if="endDate">至{{endDate}}</text>
                </view>
                <view class="u-calendar__bottom__btn">
                    <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
    /**
     * calendar 日历
     * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
     * @tutorial http://uviewui.com/components/calendar.html
     * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
     * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
     * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
     * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
     * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
     * @property {String Number} max-year 可切换的最大年份(默认2050)
     * @property {String Number} min-year 最小可选日期(默认1950)
     * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
     * @property {String Number} max-date 最大可选日期(默认当前日期)
     * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
     * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
     * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
     * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
     * @property {String} color 日期字体的默认颜色(默认#303133)
     * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
     * @property {String Number} z-index 弹出时的z-index值(默认10075)
     * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
     * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
     * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
     * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
     * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
     * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
     * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
     * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
     * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
     */
    
    export default {
        name: 'u-calendar',
        props: {
            safeAreaInsetBottom: {
                type: Boolean,
                default: false
            },
            // 是否允许通过点击遮罩关闭Picker
            maskCloseAble: {
                type: Boolean,
                default: true
            },
            // 通过双向绑定控制组件的弹出与收起
            value: {
                type: Boolean,
                default: false
            },
            // 弹出的z-index值
            zIndex: {
                type: [String, Number],
                default: 0
            },
            // 是否允许切换年份
            changeYear: {
                type: Boolean,
                default: true
            },
            // 是否允许切换月份
            changeMonth: {
                type: Boolean,
                default: true
            },
            // date-单个日期选择，range-开始日期+结束日期选择
            mode: {
                type: String,
                default: 'date'
            },
            // 可切换的最大年份
            maxYear: {
                type: [Number, String],
                default: 2050
            },
            // 可切换的最小年份
            minYear: {
                type: [Number, String],
                default: 1950
            },
            // 最小可选日期(不在范围内日期禁用不可选)
            minDate: {
                type: [Number, String],
                default: '1950-01-01'
            },
            /**
             * 最大可选日期
             * 默认最大值为今天，之后的日期不可选
             * 2030-12-31
             * */
            maxDate: {
                type: [Number, String],
                default: ''
            },
            // 弹窗顶部左右两边的圆角值
            borderRadius: {
                type: [String, Number],
                default: 20
            },
            // 月份切换按钮箭头颜色
            monthArrowColor: {
                type: String,
                default: '#606266'
            },
            // 年份切换按钮箭头颜色
            yearArrowColor: {
                type: String,
                default: '#909399'
            },
            // 默认日期字体颜色
            color: {
                type: String,
                default: '#303133'
            },
            // 选中|起始结束日期背景色
            activeBgColor: {
                type: String,
                default: '#2979ff'
            },
            // 选中|起始结束日期字体颜色
            activeColor: {
                type: String,
                default: '#ffffff'
            },
            // 范围内日期背景色
            rangeBgColor: {
                type: String,
                default: 'rgba(41,121,255,0.13)'
            }, 
            // 范围内日期字体颜色
            rangeColor: {
                type: String,
                default: '#2979ff'
            },
            // mode=range时生效，起始日期自定义文案
            startText: {
                type: String,
                default: '开始'
            },
            // mode=range时生效，结束日期自定义文案
            endText: {
                type: String,
                default: '结束'
            },
            //按钮样式类型
            btnType: {
                type: String,
                default: 'primary'
            },
            // 当前选中日期带选中效果
            isActiveCurrent: {
                type: Boolean,
                default: true
            },
            // 切换年月是否触发事件 mode=date时生效
            isChange: {
                type: Boolean,
                default: false
            },
            // 是否显示右上角的关闭图标
            closeable: {
                type: Boolean,
                default: true
            },
            // 顶部的提示文字
            toolTip: {
                type: String,
                default: '选择日期'
            }
        },
        data() {
            return {
                // 星期几,值为1-7
                weekday: 1, 
                weekdayArr:[],
                // 当前月有多少天
                days: 0, 
                daysArr:[],
                showTitle: '',
                year: 2020,
                month: 0,
                day: 0,
                startYear: 0,
                startMonth: 0,
                startDay: 0,
                endYear: 0,
                endMonth: 0,
                endDay: 0,
                today: '',
                activeDate: '',
                startDate: '',
                endDate: '',
                isStart: true,
                min: null,
                max: null,
                weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
            };
        },
        computed: {
            dataChange() {
                return `${this.mode}-${this.minDate}-${this.maxDate}`;
            },
            uZIndex() {
                // 如果用户有传递z-index值，优先使用
                return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
            }
        },
        watch: {
            dataChange(val) {
                this.init()
            }
        },
        created() {
            this.init()
        },
        methods: {
            getColor(index, type) {
                let color = type == 1 ? '' : this.color;
                let day = index + 1
                let date = `${this.year}-${this.month}-${day}`
                let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
                let start = this.startDate.replace(/\-/g, '/')
                let end = this.endDate.replace(/\-/g, '/')
                if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
                    color = type == 1 ? this.activeBgColor : this.activeColor;
                } else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
                    color = type == 1 ? this.rangeBgColor : this.rangeColor;
                }
                return color;
            },
            init() {
                let now = new Date();
                this.year = now.getFullYear();
                this.month = now.getMonth() + 1;
                this.day = now.getDate();
                this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
                this.activeDate = this.today;
                this.min = this.initDate(this.minDate);
                this.max = this.initDate(this.maxDate || this.today);
                this.startDate = "";
                this.startYear = 0;
                this.startMonth = 0;
                this.startDay = 0;
                this.endYear = 0;
                this.endMonth = 0;
                this.endDay = 0;
                this.endDate = "";
                this.isStart = true;
                this.changeData();
            },
            //日期处理
            initDate(date) {
                let fdate = date.split('-');
                return {
                    year: Number(fdate[0] || 1920),
                    month: Number(fdate[1] || 1),
                    day: Number(fdate[2] || 1)
                }
            },
            openDisAbled: function(year, month, day) {
                let bool = true;
                let date = `${year}/${month}/${day}`;
                // let today = this.today.replace(/\-/g, '/');
                let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
                let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
                let timestamp = new Date(date).getTime();
                if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
                    bool = false;
                }
                return bool;
            },
            generateArray: function(start, end) {
                return Array.from(new Array(end + 1).keys()).slice(start);
            },
            formatNum: function(num) {
                return num < 10 ? '0' + num : num + '';
            },
            //一个月有多少天
            getMonthDay(year, month) {
                let days = new Date(year, month, 0).getDate();
                return days;
            },
            getWeekday(year, month) {
                let date = new Date(`${year}/${month}/01 00:00:00`);
                return date.getDay();
            },
            checkRange(year) {
                let overstep = false;
                if (year < this.minYear || year > this.maxYear) {
                    uni.showToast({
                        title: "日期超出范围啦~",
                        icon: 'none'
                    })
                    overstep = true;
                }
                return overstep;
            },
            changeMonthHandler(isAdd) {
                if (isAdd) {
                    let month = this.month + 1;
                    let year = month > 12 ? this.year + 1 : this.year;
                    if (!this.checkRange(year)) {
                        this.month = month > 12 ? 1 : month;
                        this.year = year;
                        this.changeData();
                    }

                } else {
                    let month = this.month - 1;
                    let year = month < 1 ? this.year - 1 : this.year;
                    if (!this.checkRange(year)) {
                        this.month = month < 1 ? 12 : month;
                        this.year = year;
                        this.changeData();
                    }
                }
            },
            changeYearHandler(isAdd) {
                let year = isAdd ? this.year + 1 : this.year - 1;
                if (!this.checkRange(year)) {
                    this.year = year;
                    this.changeData();
                }
            },
            changeData() {
                this.days = this.getMonthDay(this.year, this.month);
                this.daysArr=this.generateArray(1,this.days)
                this.weekday = this.getWeekday(this.year, this.month);
                this.weekdayArr=this.generateArray(1,this.weekday)
                this.showTitle = `${this.year}年${this.month}月`;
                if (this.isChange && this.mode == 'date') {
                    this.btnFix(true);
                }
            },
            dateClick: function(day) {
                day += 1;
                if (!this.openDisAbled(this.year, this.month, day)) {
                    this.day = day;
                    let date = `${this.year}-${this.month}-${day}`;
                    if (this.mode == 'date') {
                        this.activeDate = date;
                    } else {
                        let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
                        if (this.isStart || compare) {
                            this.startDate = date;
                            this.startYear = this.year;
                            this.startMonth = this.month;
                            this.startDay = this.day;
                            this.endYear = 0;
                            this.endMonth = 0;
                            this.endDay = 0;
                            this.endDate = "";
                            this.activeDate = "";
                            this.isStart = false;
                        } else {
                            this.endDate = date;
                            this.endYear = this.year;
                            this.endMonth = this.month;
                            this.endDay = this.day;
                            this.isStart = true;
                        }
                    }
                }
            },
            close() {
                // 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
                this.$emit('input', false);
            },
            getWeekText(date) {
                date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
                let week = date.getDay();
                return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
            },
            btnFix(show) {
                if (!show) {
                    this.close();
                }
                if (this.mode == 'date') {
                    let arr = this.activeDate.split('-')
                    let year = this.isChange ? this.year : Number(arr[0]);
                    let month = this.isChange ? this.month : Number(arr[1]);
                    let day = this.isChange ? this.day : Number(arr[2]);
                    //当前月有多少天
                    let days = this.getMonthDay(year, month);
                    let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
                    let weekText = this.getWeekText(result);
                    let isToday = false;
                    if (`${year}-${month}-${day}` == this.today) {
                        //今天
                        isToday = true;
                    }
                    this.$emit('change', {
                        year: year,
                        month: month,
                        day: day,
                        days: days,
                        result: result,
                        week: weekText,
                        isToday: isToday,
                        // switch: show //是否是切换年月操作
                    });
                } else {
                    if (!this.startDate || !this.endDate) return;
                    let startMonth = this.formatNum(this.startMonth);
                    let startDay = this.formatNum(this.startDay);
                    let startDate = `${this.startYear}-${startMonth}-${startDay}`;
                    let startWeek = this.getWeekText(startDate)

                    let endMonth = this.formatNum(this.endMonth);
                    let endDay = this.formatNum(this.endDay);
                    let endDate = `${this.endYear}-${endMonth}-${endDay}`;
                    let endWeek = this.getWeekText(endDate);
                    this.$emit('change', {
                        startYear: this.startYear,
                        startMonth: this.startMonth,
                        startDay: this.startDay,
                        startDate: startDate,
                        startWeek: startWeek,
                        endYear: this.endYear,
                        endMonth: this.endMonth,
                        endDay: this.endDay,
                        endDate: endDate,
                        endWeek: endWeek
                    });
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../libs/css/style.components.scss";
    
    .u-calendar {
        color: $u-content-color;
        
        &__header {
            width: 100%;
            box-sizing: border-box;
            font-size: 30rpx;
            background-color: #fff;
            color: $u-main-color;
            
            &__text {
                margin-top: 30rpx;
                padding: 0 60rpx;
                @include vue-flex;
                justify-content: center;
                align-items: center;
            }
        }
        
        &__action {
            padding: 40rpx 0 40rpx 0;
            
            &__icon {
                margin: 0 16rpx;
            }
            
            &__text {
                padding: 0 16rpx;
                color: $u-main-color;
                font-size: 32rpx;
                line-height: 32rpx;
                font-weight: bold;
            }
        }
    
        &__week-day {
            @include vue-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 0;
            overflow: hidden;
            
            &__text {
                flex: 1;
                text-align: center;
            }
        }
    
        &__content {
            width: 100%;
            @include vue-flex;
            flex-wrap: wrap;
            padding: 6px 0;
            box-sizing: border-box;
            background-color: #fff;
            position: relative;
            
            &--end-date {
                border-top-right-radius: 8rpx;
                border-bottom-right-radius: 8rpx;
            }
            
            &--start-date {
                border-top-left-radius: 8rpx;
                border-bottom-left-radius: 8rpx;
            }
            
            &__item {
                width: 14.2857%;
                @include vue-flex;
                align-items: center;
                justify-content: center;
                padding: 6px 0;
                overflow: hidden;
                position: relative;
                z-index: 2;
                
                &__inner {
                    height: 84rpx;
                    @include vue-flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    font-size: 32rpx;
                    position: relative;
                    border-radius: 50%;
                    
                    &__desc {
                        width: 100%;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        transform: scale(0.75);
                        transform-origin: center center;
                        position: absolute;
                        left: 0;
                        text-align: center;
                        bottom: 2rpx;
                    }
                }
                
                &__tips {
                    width: 100%;
                    font-size: 24rpx;
                    line-height: 24rpx;
                    position: absolute;
                    left: 0;
                    transform: scale(0.8);
                    transform-origin: center center;
                    text-align: center;
                    bottom: 8rpx;
                    z-index: 2;
                }
            }
            
            &__bg-month {
                position: absolute;
                font-size: 130px;
                line-height: 130px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #e4e7ed;
                z-index: 1;
            }
        }
    
        &__bottom {
            width: 100%;
            @include vue-flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: #fff;
            padding: 0 40rpx 30rpx;
            box-sizing: border-box;
            font-size: 24rpx;
            color: $u-tips-color;
            
            &__choose {
                height: 50rpx;
            }
            
            &__btn {
                width: 100%;
            }
        }
    }
</style>